<template>
  <div class="page" style="background: #000">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">Back</span>
          </a>
        </div>
        <div class="title">Thumbs Gallery</div>
      </div>
    </div>
    <div class="page-content">
      <div class="swiper-container demo-swiper-gallery-top">
        <div class="swiper-wrapper">
          <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-1.jpg)" class="swiper-slide"></div>
          <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-2.jpg)" class="swiper-slide"></div>
          <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-3.jpg)" class="swiper-slide"></div>
          <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-4.jpg)" class="swiper-slide"></div>
          <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-5.jpg)" class="swiper-slide"></div>
          <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-6.jpg)" class="swiper-slide"></div>
        </div>
        <div class="swiper-button-next color-white"></div>
        <div class="swiper-button-prev color-white"></div>
      </div>
      <div class="swiper-container demo-swiper-gallery-thumbs">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-1.jpg)" class="swiper-slide-pic"></div>
          </div>
          <div class="swiper-slide">
            <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-2.jpg)" class="swiper-slide-pic"></div>
          </div>
          <div class="swiper-slide">
            <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-3.jpg)" class="swiper-slide-pic"></div>
          </div>
          <div class="swiper-slide">
            <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-4.jpg)" class="swiper-slide-pic"></div>
          </div>
          <div class="swiper-slide">
            <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-5.jpg)" class="swiper-slide-pic"></div>
          </div>
          <div class="swiper-slide">
            <div style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-6.jpg)" class="swiper-slide-pic"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  return {
    on: {
      pageBeforeRemove() {
        var self = this;
        self.swiperTop.destroy();
        self.swiperThumbs.destroy();
      },
      pageInit() {
        var self = this;
        var swiperThumbs = self.$app.swiper.create('.demo-swiper-gallery-thumbs', {
            slidesPerView: 4,
            spaceBetween: 10,
            freeMode: true,
            watchSlidesProgress: true,
            watchSlidesVisibility: true,
        });
        var swiperTop = self.$app.swiper.create('.demo-swiper-gallery-top', {
            spaceBetween: 10,
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            thumbs: {
              swiper: swiperThumbs,
            },
        });

        self.swiperTop = swiperTop;
        self.swiperThumbs = swiperThumbs;
      }
    }
  }
</script>
